<template>
	<view class="index">
		<view class="top">
			<image src="/static/images/homeBck.png" mode="" class="bckImage"></image>
		</view>
		<view class="top-item">
			<view class="item-left">
				<u-icon name="map-fill" size="16" />
				<text>{{positioning_text}}</text>
				<u-icon name="arrow-right" size="16" />
			</view>
			<view class="item-right">
				<u-icon name="search" size="28" />
				<u-icon name="scan" size="28" />
			</view>
		</view>
		<view class="nav-tag-img">
			<view class="tag-1">
				<image src="@/static/images/nav-tag-1.png" @tap="goto('pages/home/appointment')"></image>
			</view>
			<view class="tag-2">
				<image src="@/static/images/nav-tag-2.png" @tap="goto('pages/home/sideline')"></image>
				<image src="@/static/images/nav-tag-3.png" @tap="goto('pages/home/acceptOrders')">
				</image>
			</view>
		</view>
		<view class="announcement">
			<image class="announcement-bg" src="@/static/images/announcement-bg.png"></image>
			<view class="title">{{announcement_text}}</view>
			<view class="content">
				<text>平台公告平台公告，平台公告平台公告平台公告平台公告平台公告平台公告，台公告平台公告平台公告台公告平台公告平台公告。</text>
				<view class="imageList">
					<image src="/static/images/wechat.png" mode=""></image>
					<image src="/static/images/wechat.png" mode=""></image>
					<image src="/static/images/wechat.png" mode=""></image>
					<image src="/static/images/wechat.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="nav-item">
			<view @tap="goto('pages/home/course/offlineCourse')">
				<image src="/static/images/offline course.png"></image>
				<text>线下课程</text>
			</view>
			<view @tap="goto('pages/home/course/groupBuying')">
				<image src="/static/images/group purchase.png"></image>
				<text>体检团购</text>
			</view>
			<view @tap="goto('pages/home/headhuntingService')">
				<image src="/static/images/group purchase.png"></image>
				<text>猎头服务</text>
			</view>
		</view>
		<view class="nav">
			<view class="left">
				<view class="active">推荐</view>
				<view>按摩推拿</view>
				<view>健康讲解</view>
				<view>康复训练</view>
				<view>康复训练</view>
				<view>康复训练</view>
				<view>康复训练</view>
				<view>康复训练</view>
				<view>康复训练</view>
				<view>康复训练</view>
				<view>康复训练</view>
				<view>康复训练</view>
				<view>康复训练</view>
				<view>康复训练</view>
				<view>康复训练</view>
				<view>康复训练</view>
				<view>康复训练</view>
			</view>
			<view class="right">
				<view class="more" @tap="goto('pages/owns/physician/physicianRecommend')">查看更多 ></view>
				<view class="ul">
					<view class="li" @tap="goto('pages/owns/physician/physicianDetail')">
						<view class="left">
							<image src="/static/images/default doctor.png"></image>
							<text>1.5km</text>
						</view>
						<view class="right">
							<view class="title">
								<text>孙思邈</text>
								<view class="tag">
									<u-icon name="star" color="#FF8C40" size="20"></u-icon>
									4.5
								</view>
							</view>
							<view class="order">
								<view class="tag">东莞 初级士</view>
								<view class="price">
									<text class="tag">￥</text>
									<text class="number">286.00</text>
									<text class="unit">/小时</text>
								</view>
								<view class="appointment" @tap.stop="goto('pages/order/orderConfirm')">预约</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				positioning_text: "天安数码城",
				announcement_text: "平台公告"
			};
		},
		onShow() {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		position: relative;
		background-color: #F6F8FC;

		.top {
			position: absolute;
			top: 0;
			width: 100%;
			height: 360rpx;
			display: flex;
			
			image{
				z-index: 1;
			}
		}

		.top-item {
			position: relative;
			z-index: 99;
			padding: 115rpx 37rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item-left {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(54, 68, 79, 1);
			}

			.item-right {
				width: 129rpx;
				display: flex;
				justify-content: space-between;
			}
		}

		.nav-tag-img {
			position: relative;
			z-index: 99;
			margin: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tag-1 {
				width: 49%;
				height: 344rpx;
				display: block;

				image {
					width: 100%;
					height: 344rpx;
				}
			}

			.tag-2 {
				width: 50%;
				height: 344rpx;
				display: block;

				image {
					width: 100%;
					height: 164rpx;
				}
			}
		}

		.announcement {
			position: relative;

			.announcement-bg {
				position: absolute;
				left: 0;
				right: 0;
				margin: 0 auto;
				width: 712rpx;
				height: 356rpx;
				z-index: 0;
			}

			.title {
				position: relative;
				z-index: 99;
				font-size: 28rpx;
				font-weight: 600;
				text-align: center;
				padding: 34rpx 0 24rpx;
			}

			.content {
				position: relative;
				z-index: 99;
				height: 280rpx;
				font-size: 24rpx;
				font-weight: 400;
				width: 630rpx;
				margin: 0 auto;

				.imageList {
					margin-top: 8rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					image {
						width: 126rpx;
						height: 126rpx;
						margin-right: 16rpx;
					}
				}
			}
		}

		.nav-item {
			margin: 0 20rpx;
			display: flex;

			>view {
				width: 96rpx;
				height: 120rpx;
				margin: 0 40rpx;

				>image {
					width: 80rpx;
					height: 80rpx;
				}

				>text {
					font-size: 24rpx;
					font-weight: 400;
				}
			}
		}

		.nav {
			margin-top: 48rpx;
			display: flex;
			justify-content: space-between;

			.left {
				border-radius: 0 24rpx 0 0;
				overflow: hidden;
				width: 160rpx;
				height: 768rpx;
				overflow-y: auto;
				background-color: #FFF;

				>view {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 160rpx;
					height: 96rpx;
					font-size: 24rpx;
					font-weight: 400;
				}

				>view.active {
					color: #FFF;
					background: $theme-color
				}
			}

			.right {
				margin: 0 16rpx;
				width: calc(100% - 160rpx);

				.more {
					height: 32rpx;
					text-align: right;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(94, 103, 110, 1);
					margin: 16rpx
				}

				.ul {
					height: 768rpx;
					overflow-y: auto;

					.li {
						width: 550rpx;
						height: 176rpx;
						opacity: 1;
						border-radius: 16rpx;
						background-color: #FFF;
						display: flex;
						justify-content: space-between;
						border-radius: 16rpx;
						overflow: hidden;


						.left {
							image {
								width: 88rpx;
								height: 88rpx;
								margin: 24rpx 24rpx 8rpx;
							}

							text {
								color: rgba(152, 160, 166, 1);
								text-align: center;
								display: block;
							}
						}

						.right {
							position: relative;

							.title {
								margin-top: 24rpx;
								display: flex;
								justify-content: space-between;

								>text {
									font-size: 36rpx;
									font-weight: 500;
									color: rgba(54, 68, 79, 1);
								}

								.tag {
									display: flex;
									font-size: 28rpx;
									font-weight: 400;
									justify-content: center;
									align-items: center;
								}
							}

							.order {
								margin-top: 12rpx;

								.tag {
									font-size: 28rpx;
									font-weight: 400;
									color: rgba(94, 103, 110, 1);
								}

								.price {
									margin-top: 12rpx;
									font-size: 28rpx;
									font-weight: 600;
									color: rgba(255, 140, 64, 1);

									.tag {
										font-size: 20rpx;
										font-weight: 500;
									}

									.unit {
										font-size: 22rpx;
										font-weight: 400;
									}
								}

								.appointment {
									position: absolute;
									right: 0;
									bottom: 24rpx;
									width: 112rpx;
									height: 48rpx;
									border-radius: 24rpx;
									background: $theme-color;
									color: #FFF;
									font-size: 28rpx;
									font-weight: 400;
									display: flex;
									justify-content: center;
									align-items: center;
								}
							}
						}

					}

				}
			}
		}
	}
</style>